<template>
  <div class="write-off-fee">
    <div class="title">付款流水</div>
    <div class="payable-water">
      <vxe-table border ref="writeNoRef" :loading="loading" show-overflow="title" height="200" :data="formState.serials" :scroll-y="{ enabled: true, gt: 30 }">
        <vxe-column type="radio" width="60" fixed="left">
          <template #header>
            <a-button type="link" @click="clearRadioRowEevnt" :disabled="!selectWriteNoRow">取消</a-button>
          </template>
        </vxe-column>
        <vxe-column field="agent" title="代理商" min-width="140" fixed="left"></vxe-column>
        <vxe-column field="companyName" title="付款分公司" min-width="135"> </vxe-column>
        <vxe-column field="payAccount" title="付款账户" min-width="90"> </vxe-column>
        <vxe-column field="payAmount" title="付款金额" min-width="90"> </vxe-column>
        <vxe-column field="remark" title="付款备注" min-width="120"></vxe-column>
      </vxe-table>
    </div>
    <div class="apply-no">
      <div class="title">审批单</div>
      <div class="tip">
        <span
          >已选金额: <span class="emphasis-item">{{ selectRowsApplyAmount }}</span></span
        >
        <a-button type="primary" v-debounce :loading="loading" @click="submitHandle">确认核销</a-button>
      </div>
      <vxe-table border ref="applyNoRef" :loading="loading" show-overflow="title" height="400" :data="formState.paymentApplies" :scroll-y="{ enabled: true, gt: 30 }">
        <vxe-column type="checkbox" width="50" fixed="left"></vxe-column>
        <vxe-column field="applyNo" title="审批单号" min-width="140" fixed="left"> </vxe-column>
        <vxe-column field="agent" title="代理商" min-width="135"> </vxe-column>
        <vxe-column field="paymentAmount" title="请款金额" min-width="90"> </vxe-column>
        <vxe-column field="createName" title="申请人" min-width="90"> </vxe-column>
        <vxe-column field="verificaStatus" title="核销状态" min-width="90">
          <template #default="{ row }">
            <a-tag color="#f50" v-if="row.verificaStatus === 1">未核销</a-tag>
            <a-tag color="#87d068" v-if="row.verificaStatus === 2">已核销</a-tag>
          </template>
        </vxe-column>

        <vxe-column field="createTime" title="申请时间" min-width="135">
          <template #default="{ row }">
            {{ dayjs(Number(row.createTime)).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </vxe-column>
        <vxe-column field="action" title="操作" min-width="70">
          <template #default="{ row }">
            <a-button type="link" @click="showApplyInfoHandle(row)"> 详情</a-button>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <!-- 抽屉 -->
    <a-drawer class="custom-drawer" v-model:visible="drawerOpts.visible" :title="drawerOpts.title" :maskClosable="false" :closable="true" :width="drawerOpts.width" placement="right">
      <component v-model:visible="drawerOpts.visible" :is="drawerOpts.component" :type="drawerOpts.type" :pass-data="drawerOpts.passData" @submit="drawerSubmitHandle"></component>
    </a-drawer>
  </div>
</template>
<script lang="ts">
import ApprovalPending from "../approvalPending/index.vue";
export default {
  components: {
    ApprovalPending
  }
};
</script>
<script lang="ts" setup>
import dayjs from "dayjs";
import { toRefs, watch } from "vue";
import ModalHook from "@/hook/modalHook";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: PaymentApproval.ListRows[];
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "submit"): void;
}>();
const { visible, passData } = toRefs(props);
const { formState, applyNoRef, init, loading, drawerOpts, writeNoRef, selectWriteNoRow } = InitHook({ passData });
const { submitHandle, selectRowsApplyAmount, showApplyInfoHandle, clearRadioRowEevnt } = OperationHook({ selectWriteNoRow, writeNoRef, drawerOpts, formState, applyNoRef, loading, emit });
init();
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) init();
  }
);
const { drawerSubmitHandle } = ModalHook({
  drawerOpts
});
</script>
<style lang="stylus" scoped>
.write-off-fee{
    background-color: #fff;
    padding: 12px;
    height: 100%;
    .title{
        font-weight: 600;
        padding-bottom: 12px;
    }
    .apply-no{
        margin-top: 12px;
        .tip{
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            padding-bottom: 12px;
        }
        .emphasis-item {
            color: #fe8100;
            > :deep(.ant-form-item-label){
                >label{
                    color: #fe8100;
                }
            }
        }
    }
}
</style>
